<template>
  <div class="main">
    <div class="speed-ball" @mousedown="startDrag">
      <div class="waterBall">
        <div ref="waterBall"></div>
      </div>
      <div class="ball-content">
        <div class="speed-info">
          <div class="upload">
            <span class="label">↑</span>
            <span class="value">{{ formatSpeed(speed.upload, 1) }}</span>
            <span class="unit">{{ unit.upload }}</span>
          </div>
          <div class="download">
            <span class="label">↓</span>
            <span class="value">{{ formatSpeed(speed.download, 0) }}</span>
            <span class="unit">{{ unit.download }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import "echarts-liquidfill/src/liquidFill.js";
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
const waterBall = ref();

const speed = ref({
  upload: 0,
  download: 0,
});
const unit = ref({
  upload: "K/s",
  download: "K/s",
});
let lastUpload = 0;
let lastDownload = 0;
let isDragging = false;
let startPos = { x: 0, y: 0 };

function formatSpeed(num: number, type?: 0 | 1): string {
  if (num < 1024) {
    if (type) {
      unit.value.upload = "K/s";
    } else {
      unit.value.download = "K/s";
    }
    return num.toFixed(1);
  }
  if (type) {
    unit.value.upload = "M/s";
  } else {
    unit.value.download = "M/s";
  }
  return (num / 1024).toFixed(1);
}

// 开始拖动
function startDrag(e: MouseEvent) {
  console.log(123);
  if (e.button !== 0) return; // 只响应左键
  isDragging = true;
  offEvent()
  startPos = {
    x: e.screenX - window.screenX,
    y: e.screenY - window.screenY,
  };

  document.addEventListener("mousemove", onDrag);
  document.addEventListener("mouseup", stopDrag);
}

// 拖动中
function onDrag(e: MouseEvent) {
  if (!isDragging) return;
  window.ipcRenderer.invoke("setNetworkBallPosition", {
    x: e.screenX - startPos.x,
    y: e.screenY - startPos.y,
  });
}

// 停止拖动
function stopDrag() {
  isDragging = false;
  asd()
  document.removeEventListener("mousemove", onDrag);
  document.removeEventListener("mouseup", stopDrag);
}

const id = Date.now();
const id2 = Date.now() + 1;
function asd() {
  console.log("mounted");
  const chart = echarts.init(waterBall.value);
  const option = {
    // backgroundColor: "#0F224C", //背景色
    series: [
      {
        type: "liquidFill", //水位图
        radius: "100%", //显示比例
        center: ["50%", "50%"], //中心点
        amplitude: 2, //水波振幅
        data: [0.5], // data个数代表波浪数
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#446bf5",
              },
              {
                offset: 1,
                color: "#2ca3e2",
              },
            ],
            globalCoord: false,
          },
        ], //波浪颜色
        backgroundStyle: {
          borderWidth: 1, //外边框
          // borderColor: '#23cc72', //边框颜色
          color: "#363e50", //边框内部填充部分颜色
        },
        label: {
          //标签设置
          position: ["50%", "45%"],
          formatter: "50%", //显示文本,
          textStyle: {
            fontSize: "14px", //文本字号,
            color: "#fff",
          },
        },
        outline: {
          show: false,
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: "#112165",
          },
        },
      },
    ],
  };

  chart.setOption(option);

  window.ipcRenderer.on(
    "networkSpeed",
    (_, data) => {
      // if (isDragging) return
      console.log(data);
      speed.value = data;
    },
    id,
  );
  window.ipcRenderer.on(
    "memoryInfo",
    (_, data) => {
      // if (isDragging) return
      console.log(data);
      const option = {
        // backgroundColor: "#0F224C", //背景色
        series: [
          {
            type: "liquidFill", //水位图
            radius: "100%", //显示比例
            center: ["50%", "50%"], //中心点
            amplitude: 2, //水波振幅
            data: [Number(data.usedPercentage) / 100], // data个数代表波浪数
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#446bf5",
                  },
                  {
                    offset: 1,
                    color: "#2ca3e2",
                  },
                ],
                globalCoord: false,
              },
            ], //波浪颜色
            backgroundStyle: {
              borderWidth: 1, //外边框
              // borderColor: '#23cc72', //边框颜色
              color: "#363e50", //边框内部填充部分颜色
            },
            label: {
              //标签设置
              position: ["50%", "45%"],
              formatter: Math.floor(Number(data.usedPercentage)) + "%", //显示文本,
              textStyle: {
                fontSize: "14px", //文本字号,
                color: "#fff",
              },
            },
            outline: {
              show: false,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: "#112165",
              },
            },
          },
        ],
      };

      chart.setOption(option);
    },
    id2,
  );
}
onMounted(() => {
  asd()
});

function offEvent() {
  window.ipcRenderer.off("networkSpeed", id);
  window.ipcRenderer.off("memoryInfo", id2);
}
onBeforeUnmount(() => {
  offEvent()
});
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: transparent;
  overflow: hidden;
}

.main {
  display: flex;
  align-items: center;
  height: 100vh;
}

.speed-ball {
  position: relative;
  cursor: pointer;
  width: 100vw;
  height: 70vh;
  background-color: rgba(0, 0, 0, 0.815);
  /* background: rgba(0, 0, 0, 0.75); */
  border-radius: 100px;
  display: flex;
  align-items: center;
  /* -webkit-app-region: drag; */
}

.ball-content {
  /* height: 40px; */
  color: white;
  font-size: 9px;
  text-align: right;
  display: flex;
  align-items: center;
  /* background-color: black; */
}

.waterBall div {
  height: 100vh;
  width: 50px;
}

.unit {
  font-size: 8px;
  color: rgb(129, 129, 129);
  padding-left: 1px;
}

.upload .label {
  color: #4caf50;
}

.download .label {
  color: #2196f3;
}
</style>
